<template>
	<view>
		<!-- <cover-image class="dzyd-img" :src="allUrl" mode=""></cover-image> -->
		<!-- <pdf ref="pdf" v-if="allUrl" :src="allUrl"></pdf> -->
		<web-view v-if="pdfUrl" :update-title="false" ref="web-view" class="dzyd-img" :src="allUrl"></web-view>
		<emptyWaybill v-else="!pdfUrl">暂无电子运单信息</emptyWaybill>
	</view>
</template>

<script>
	import emptyWaybill from "@/components/tool-empty/waybill";
	export default {
		components: {
			emptyWaybill
		},
		props: ['info', 'navBarHeight', 'swiperIndex'],
		data() {
			return {
				pdfUrl: '',
				allUrl: '',
				wv: null,
				setStyle: null,
			}
		},
		watch: {
			swiperIndex(swiperIndex) {
				if (this.pdfUrl) {
					if (swiperIndex === 1) {
						this.wv.setStyle(this.setStyle);
					} else {
						this.wv.setStyle({
							top: 0,
							height: 1,
						})
					}
				}
			},

		},
		methods: {
			initWebView() {
				let billPdfPath = this.billPdfPath;
				if (this.info.pdfUrl.startsWith('staticAnnex')) {
					billPdfPath = billPdfPath.replace('/billpdf/', '/')
				}
				let fileUrl = encodeURIComponent(billPdfPath + this.info.pdfUrl)
				this.allUrl = '/static/hybrid/html/web/viewer.html' + '?file=' + fileUrl
				uni.getSystemInfo({
					//成功获取的回调函数，返回值为系统信息
					success: (sysinfo) => {
						let topHeight = this.navBarHeight + 44; // tab 高度加上顶部标题栏高度
						var currentWebview = this.$parent.$scope.$getAppWebview(); //获取当前web-view
						this.setStyle = { //设置web-view距离顶部的距离以及自己的高度，单位为px
							top: sysinfo.statusBarHeight + topHeight,
							height: sysinfo.screenHeight - topHeight
						};
						this.wv = currentWebview.children()[0];
						this.wv.setStyle(this.setStyle);
					},
					complete: () => {}
				});
			}
		},
		computed: {
			billPdfPath() {
				return this.$store.getters.getBillPdfDomain;
			}
		},
		mounted() {
			this.pdfUrl = this.info.pdfUrl;
			if (this.pdfUrl) {
				setTimeout(() => {
					this.initWebView();
				}, 400)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.dzyd-img {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #ddd;
	}
</style>
